<%--
    Document   : index
    Created on : Dec 12, 2013, 10:37:24 PM
    Author     : CHIP
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Survey</title>
    </head>
    <body>        
        <script type="text/javascript"src="js/validateQuestion.js"></script>
        <script>
            var countQuestion = 1;
            var countAnswer = 1;
            var check = true;
            
            function addAnswer(divID){
                countAnswer++;
                //                                alert("click toi day"+ divID);
                var p = document.createElement("div");
                //p.setAttribute("id", "ans");
                //                alert("click toi set");
                p.innerHTML="<input type='text' id='txtAnswer"+countAnswer+"' name='"+divID+"txtName"+countAnswer+"' placeholder='Nội dung câu trả lời' style='width: 875px' /> <br/>";
                var pa = document.getElementById(divID);
                pa.appendChild(p);
            }
            function addQuestion(){
                countAnswer++;
                countQuestion++;
                
                var ans = "answer"+ countQuestion;
                var div = document.createElement("div");
                div.setAttribute("id", "question"+countQuestion);
                div.innerHTML="<div>Câu hỏi "+countQuestion+":</div>"+
                    "<textarea style='width: 900px; height: 50px' id='areaQuestion"+countQuestion+"' name='txtQuestion"+countQuestion+"' placeholder='Nội dung câu hỏi'></textarea>" +
                    "<div>Câu trả lời:</div>"+
                    "<div id='answer"+countQuestion+"'><input type='text' id='txtAnswer"+countAnswer+"' name='"+ans.toString()+"txtName"+countAnswer+"' placeholder='Nội dung câu trả lời' style='width: 875px' /><input type='button' value='+' onclick='addAnswer(\""+ans.toString()+"\")'/> <br/>"+

                    "</div> <input style='width: 203px;' onclick='addQuestion()' type='button' name='' value='thêm câu hỏi' />";
                var pa = document.getElementById("mainSurvey");
                pa.appendChild(div);
            }
            function getCount(){
                document.getElementById("numberQuestion").setAttribute("value", countQuestion);
                document.getElementById("numberAnswer").setAttribute("value", countAnswer);
            }
            function submitForm(){
                this.getCount();
                document.getElementById("myForm").submit();
            }

        </script>

        <form action="SurveyController" method="get" id="myForm">
            <div id="titleID">
                <div>Tựa đề survey:</div>
                <div>
                    <input type="text" name="txtSurveyTitle" value="" /><br/>
                    Mô tả survey:<br/>
                    <input type="text" name="txtSurveyDescription" value="" /><br/>
                </div>
            </div>
            <div id="mainSurvey">                
                <div id="question1">
                    <div>Câu hỏi 1:</div>
                    <textarea style="width: 900px; height: 50px" id="areaQuestion1" name="txtQuestion1" placeholder="Nội dung câu hỏi"></textarea>
                    <div>Câu trả lời:</div>
                    <div id="answer1">
                        <div>
                            <input type="text" id="txtAnswer1" name="answer1txtName1" placeholder="Nội dung câu trả lời" style="width: 875px" />
                            <input type="button" value="+" onclick="addAnswer('answer1')"/> <br/>
                        </div>
                    </div>
                    <input style="width: 203px;" onclick="addQuestion()" type="button" name="" value="thêm câu hỏi" />
                </div>

                <!-- End Load Question -->
            </div>
            <input type="hidden" id="numberQuestion" name="numberQuestion"/>
            <input type="hidden" id="numberAnswer" name="numberAnswer"/>
            <input type="button" onclick="submitForm();" value="Submit"/>
        </form>
    </body>
</html>
